<template>
  <div>
      <!-- 
        当前报错：是旧版本的vue中，强制要求写 key属性
        新版本vue不在强制，但是插件没更新，所以毅然报错
       -->

       <!-- 
        解决方法
        1.这不是真的报错，可以忍着
        2.关闭插件报错功能  影响太大
        3.补充key属性
        -->

        <!-- 为了比避免key重复，用 序号做标识更好一点-->
        <li v-for="(x,i) in name" :key="i">{{x}}</li>

        <!-- 
          key:是唯一标识，提高数组袁术增删时的重复渲染效率

          比如：参加运动会，每个人都会带矿泉水，走方阵时会留在座位附近；回来以后如何分别那瓶水是谁的？
          方案：做记号；可以通过记号找到之前的水瓶
         -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: ['蔡徐坤','唱','跳','rap','打篮球'],
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>